<template>
  <div class="show-card">
    <ul v-if="activeSinger?.area " class="flex items-center mb-2 flex-wrap">
      <li
          v-for="asc in asciiAZ"
          :key="asc.initial"
          class="p-1 yu-bgColor-hover"
          @click="clickLetter(asc)"
          :class="asc.initial === activeSinger?.initial ? 'yu-bgColor-active' : ''"
      >
        {{ asc.title }}
      </li>
    </ul>
    <ul class="grid  gap-4" :class="store.isFlag ? 'grid-cols-5' : 'grid-cols-2'">
      <li v-for="singer in singerCard" :key="singer?.id" style="margin: 0 auto;">
          <div class="cursor-pointer" @click="jumpArtist(singer?.id)">
            <img class="w-full h-full" v-lazy="singer.picUrl" alt="">
          </div>
          <div class="flex items-center justify-between mt-2">
            <span class="cursor-pointer yu-textColor-hover" @click="jumpArtist(singer?.id)">{{ singer?.name }}</span>
            <span
                v-if="singer?.accountId"
                class="inline-block cursor-pointer yu-titleColor yu-textColor-hover i-ic-twotone-contact-emergency"
                @click="jumpHomePage(singer?.accountId)"
            />
          </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";
import {reactive, toRefs} from "vue";

const store = useStore()
const router = useRouter()

const data = reactive({
  asciiAZ: [] // 存储A-Z
})

const { asciiAZ } = toRefs(data)


const props = defineProps({
  singerCard: Array,
  activeSinger: Object
})

// 获取ASCII值中的A-Z
const getAsciiAz = () => {
  for (let i = 65; i <= 90; i++) {
    data.asciiAZ.push({
      initial: i,
      title: String.fromCharCode(i) // 将对应的数字转换为大写字母
    })
  }
  data.asciiAZ.unshift({
    initial: -1,
    title: '热门'
  })
  data.asciiAZ.push({
    initial: 0,
    title: '其他'
  })
  // console.log(data.asciiAZ)
}

getAsciiAz()

const $emit = defineEmits(['getAtistlist'])

// 获取通过字母获取歌手
const clickLetter = (asc) => {
  const { type, area } = props.activeSinger
  $emit('getAtistlist', {type, area, initial: asc.initial})
}


// 跳转到作者信息
const jumpArtist = (id) => {
  router.push({
    path: '/artist/hot-work',
    query: {
      id
    }
  })
}

// 跳转到个人主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
